<template>
  <view class="wallet_container">
    <view class="bg">
      <view class="balance">
        <img :src="staticUrl() + '/personalCenter/walletBgc.png'" alt="" />
        <view class="title">
          <img :src="staticUrl() + '/personalCenter/$.png'" alt="" />
          <text>可用余额</text>
        </view>
        <view class="num">
          <view>{{ balance }}</view>
          <view @click="rechargeNow">立即充值</view>
        </view>
      </view>

      <view class="type">
        <text v-for="(item, index) in titleList" :key="index"
          :class="serviceType === item.serviceType ? 'active' : ''" @click="clickTitle(item)">
          {{ item.label }}
        </text>
      </view>
    </view>

    <view class="list">
      <view v-for="(item, index) in tableData" :key="index" class="item">
        <view>
          <view class="Deduction">抵扣</view>
          <text class="createTime">{{ item.createTime }}</text>
        </view>
        <view>
          <text class="money">{{ item.money }}</text>
          <text class="details">详情></text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { rechargeDetails, getwalletBalance } from '@/api/personalCenter/index'

export default {
  data () {
    return {
      type: 1,
      tableData: [],
      titleList: [
        {
          type: 'WALLET_PAY',
          label: '支出记录'
        },
        {
          type: 'WALLET_RECHARGE',
          label: '充值记录'
        },
        {
          type: 'WALLET_REFUND',
          label: '退款记录'
        }
      ],
      serviceType: 'WALLET_PAY',
      pageNumber: 1,
      pageSize: 30,
      balance: 0
    }
  },
  // 监听触底
  onReachBottom () {
    this.pageNumber++
    this.getList()
  },
  onShow () {
    getwalletBalance().then(res => {
      this.balance = res.data.memberWallet
    })
    this.getList()
  },
  methods: {
    rechargeNow () {
      uni.navigateTo({
        url: '/pages_user/wallet/rechargeMoney'
      })
    },
    getList () {
      rechargeDetails({
        serviceType: this.serviceType,
        pageNumber: this.pageNumber,
        pageSize: this.pageSize
      }).then(res => {
        if (res.code === 200) {
          if (res.data.records.length === 0) {
            // uni.showToast({ icon: 'none', title: '~~数据已加载完~~', mask: true })
          } else {
            this.tableData.push(...res.data.records)
          }
        }
      })
    },
    clickTitle (val) {
      this.serviceType = val.type
      this.tableData = []
      this.pageNumber = 1
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.wallet_container {
  width: 100%;
  min-height: 100vh;
  background: #f9f9f9;

  .bg {
    position: fixed;
    top: 0;
    padding: 20rpx 0;
    width: 100%;
    background: #f9f9f9;
    z-index: 20;

    .balance {
      background: #f9f9f9;
      width: 96%;
      margin: 0 auto;
      position: relative;
      font-size: 28rpx;

      img {
        height: 240rpx;
        width: 100%;
      }

      .title {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80rpx;
        line-height: 88rpx;
        padding: 0 50rpx;
        border-bottom: 1px solid #fff;
        color: #fff;

        img {
          height: 36rpx;
          width: 36rpx;
          vertical-align: sub;
          margin-right: 16rpx;
        }
      }

      .num {
        position: absolute;
        top: 90rpx;
        left: 0;
        width: 100%;
        height: 160rpx;
        color: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        view:first-child {
          font-size: 50rpx;
          font-weight: bold;
          margin-left: 50rpx;
        }

        view:last-child {
          font-size: 24rpx;
          padding: 0 14rpx;
          border: 1px solid #fff;
          border-radius: 24rpx;
          margin-right: 40rpx;
        }
      }
    }
  }

  .type {
    margin-top: 30rpx;

    text {
      font-size: 26rpx;
      color: #8d8d8d;
      border: 1px solid #8d8d8d;
      border-radius: 30rpx;
      padding: 4rpx 16rpx;
      margin-left: 30rpx;
    }

    .active {
      background: #2871fc;
      color: #fff;
      border: 1px solid #2871fc;
    }
  }

  .list {
    background: #fff;
    padding-top: 350rpx;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 30rpx;
      border-bottom: 1px solid #f9f9f9;

      .Deduction {
        font-size: 28rpx;
        margin-top: 10rpx;
        margin-bottom: -6rpx;
      }

      .createTime {
        opacity: 0.6;
        font-size: 22rpx;
      }

      .money {
        font-size: 28rpx;
        font-weight: bold;
        margin-right: 30rpx;
      }

      .details {
        font-size: 22rpx;
        color: #2871fc;
      }
    }
  }
}
</style>
